class RemoteSensingAnalysis {
    constructor() {
        this.map = null;
        this.charts = {};
        this.currentAnalysisType = 'growth';
        this.thematicLayers = {};  // 存储不同类型的专题图层
        this.selectedArea = null;   // 当前选中的区域
        this.selectedPlot = {
            id: 'A001',
            name: 'A区水稻田',
            type: 'rice',
            area: '125亩',
            location: '新疆维吾尔自治区昌吉市',
            plantingDate: '2024-03-01',
            basicInfo: {
                soilType: '水稻土',
                irrigation: '漫灌',
                variety: '旱优73',
                previousCrop: '小麦'
            }
        };
        this.initializeMap();
        this.setupEventListeners();
        this.initializeDateRange();
        this.loadInitialData();
        this.initializeHistoryList();
        this.initializeDetailPanel();
    }

    initializeMap() {
        // 初始化地图
        this.map = L.map('analysisMap').setView([44.2335295, 87.3130815], 15);
        
        // 添加卫星底图
        L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            subdomains: ["1", "2", "3", "4"],
            attribution: '© 高德地图'
        }).addTo(this.map);

        // 添加标注图层
        L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8', {
            subdomains: ["1", "2", "3", "4"]
        }).addTo(this.map);
    }

    setupEventListeners() {
        // 分析类型切换
        document.querySelectorAll('.analysis-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                this.switchAnalysisType(btn.dataset.type);
            });
        });

        // 地图工具按钮
        document.querySelectorAll('.tool-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                this.handleToolClick(e.currentTarget);
            });
        });

        // 导出按钮
        document.querySelector('.btn-export').addEventListener('click', () => {
            this.exportReport();
        });
    }

    switchAnalysisType(type) {
        // 更新按钮状态
        document.querySelectorAll('.analysis-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.type === type);
        });

        this.currentAnalysisType = type;
        this.updateAnalysisContent(type);
    }

    getGrowthAnalysisHtml() {
        return `
            <div class="analysis-result-content">
                <div class="overview-cards">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-leaf"></i>
                        </div>
                        <div class="stat-info">
                            <h4>平均NDVI指数</h4>
                            <div class="stat-value">0.78</div>
                            <div class="stat-trend positive">
                                <i class="fas fa-arrow-up"></i>
                                较上月增长8.3%
                            </div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-info">
                            <h4>生长状态</h4>
                            <div class="stat-value">良好</div>
                            <div class="stat-text">高于历史同期水平</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-percentage"></i>
                        </div>
                        <div class="stat-info">
                            <h4>覆盖度</h4>
                            <div class="stat-value">92%</div>
                            <div class="stat-trend positive">
                                <i class="fas fa-arrow-up"></i>
                                较上月增长5.2%
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chart-container">
                    <div id="growthTrendChart" style="height: 300px;"></div>
                </div>
            </div>
        `;
    }

    getYieldAnalysisHtml() {
        return `
            <div class="analysis-result-content">
                <div class="overview-cards">
                    <div class="stat-card highlight">
                        <div class="stat-icon">
                            <i class="fas fa-balance-scale"></i>
                        </div>
                        <div class="stat-info">
                            <h4>预估产量</h4>
                            <div class="stat-value">5.8吨/亩</div>
                            <div class="stat-trend positive">
                                <i class="fas fa-arrow-up"></i>
                                较去年增长5.5%
                            </div>
                        </div>
                    </div>
                </div>
                <div class="factors-grid">
                    <div class="factor-card">
                        <i class="fas fa-sun"></i>
                        <div class="factor-info">
                            <h5>光照条件</h5>
                            <div class="factor-progress" style="--progress: 85%"></div>
                            <span>良好</span>
                        </div>
                    </div>
                    <div class="factor-card">
                        <i class="fas fa-tint"></i>
                        <div class="factor-info">
                            <h5>水分条件</h5>
                            <div class="factor-progress" style="--progress: 75%"></div>
                            <span>适中</span>
                        </div>
                    </div>
                    <div class="factor-card">
                        <i class="fas fa-leaf"></i>
                        <div class="factor-info">
                            <h5>长势情况</h5>
                            <div class="factor-progress" style="--progress: 90%"></div>
                            <span>优秀</span>
                        </div>
                    </div>
                </div>
                <div class="chart-container">
                    <div id="yieldTrendChart" style="height: 300px;"></div>
                </div>
            </div>
        `;
    }

    getDroughtAnalysisHtml() {
        return `
            <div class="analysis-result-content">
                <div class="drought-overview">
                    <div class="drought-value">
                        <span class="number">0.35</span>
                        <span class="label">干旱指数</span>
                    </div>
                    <div class="drought-scale">
                        <div class="scale-marker" style="--position: 35%"></div>
                        <div class="scale-labels">
                            <span>正常</span>
                            <span>轻度</span>
                            <span>中度</span>
                            <span>重度</span>
                        </div>
                    </div>
                </div>
                <div class="chart-container">
                    <div id="droughtDistChart" style="height: 300px;"></div>
                </div>
            </div>
        `;
    }

    getMaturityAnalysisHtml() {
        return `
            <div class="analysis-result-content">
                <div class="maturity-overview">
                    <div class="progress-ring">
                        <svg viewBox="0 0 100 100">
                            <circle class="progress-ring-circle" cx="50" cy="50" r="45"/>
                            <text x="50" y="45" class="progress-text">75%</text>
                            <text x="50" y="60" class="progress-label">成熟度</text>
                        </svg>
                    </div>
                    <div class="maturity-info">
                        <div class="current-stage">当前阶段：灌浆期</div>
                        <div class="estimate-time">预计收获时间：25天后</div>
                    </div>
                </div>
                <div class="stage-timeline">
                    <div class="timeline-item completed">
                        <div class="timeline-point"></div>
                        <div class="timeline-content">
                            <span class="stage-name">营养生长期</span>
                            <span class="stage-date">已完成</span>
                        </div>
                    </div>
                    <div class="timeline-item completed">
                        <div class="timeline-point"></div>
                        <div class="timeline-content">
                            <span class="stage-name">抽穗期</span>
                            <span class="stage-date">已完成</span>
                        </div>
                    </div>
                    <div class="timeline-item active">
                        <div class="timeline-point"></div>
                        <div class="timeline-content">
                            <span class="stage-name">灌浆期</span>
                            <span class="stage-date">进行中</span>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-point"></div>
                        <div class="timeline-content">
                            <span class="stage-name">成熟期</span>
                            <span class="stage-date">未开始</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    updateAnalysisContent(type) {
        const content = document.getElementById('analysisContent');
        content.innerHTML = '';

        switch(type) {
            case 'growth':
                content.innerHTML = this.getGrowthAnalysisHtml();
                this.initGrowthChart();
                break;
            case 'yield':
                content.innerHTML = this.getYieldAnalysisHtml();
                this.initYieldChart();
                break;
            case 'drought':
                content.innerHTML = this.getDroughtAnalysisHtml();
                this.initDroughtChart();
                break;
            case 'maturity':
                content.innerHTML = this.getMaturityAnalysisHtml();
                this.updateMaturityProgress();
                break;
        }
    }

    // 初始化生长趋势图表
    initGrowthChart() {
        const chart = echarts.init(document.getElementById('growthTrendChart'));
        const option = {
            title: {
                text: 'NDVI指数变化趋势',
                left: 'center',
                top: 10
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    return `${params[0].name}<br/>
                           NDVI: ${params[0].value}<br/>
                           ${params[0].value > 0.7 ? '生长状况良好' : '需要关注'}`;
                }
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLine: { lineStyle: { color: '#ddd' } }
            },
            yAxis: {
                type: 'value',
                name: 'NDVI指数',
                min: 0,
                max: 1,
                splitLine: { lineStyle: { color: '#eee' } }
            },
            series: [{
                name: 'NDVI',
                type: 'line',
                data: [0.45, 0.52, 0.61, 0.7, 0.78, 0.85],
                smooth: true,
                lineStyle: { width: 3, color: '#2ecc71' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(46, 204, 113, 0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(46, 204, 113, 0.1)'
                    }])
                },
                markLine: {
                    data: [{ type: 'average', name: '平均值' }]
                }
            }]
        };
        chart.setOption(option);
        this.charts.growth = chart;
    }

    // 初始化产量预估图表
    initYieldChart() {
        const chart = echarts.init(document.getElementById('yieldTrendChart'));
        const option = {
            title: {
                text: '历年产量对比',
                left: 'center',
                top: 10
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['实际产量', '预测产量'],
                bottom: 10
            },
            grid: {
                top: 60,
                bottom: 70
            },
            xAxis: {
                type: 'category',
                data: ['2019', '2020', '2021', '2022', '2023'],
                axisLine: { lineStyle: { color: '#ddd' } }
            },
            yAxis: {
                type: 'value',
                name: '吨/亩',
                splitLine: { lineStyle: { color: '#eee' } }
            },
            series: [
                {
                    name: '实际产量',
                    type: 'bar',
                    data: [4.8, 5.1, 5.3, 5.5, null],
                    itemStyle: { color: '#95a5a6' }
                },
                {
                    name: '预测产量',
                    type: 'bar',
                    data: [null, null, null, null, 5.8],
                    itemStyle: { color: '#3498db' }
                }
            ]
        };
        chart.setOption(option);
        this.charts.yield = chart;
    }

    // 初始化干旱指数图表
    initDroughtChart() {
        const chart = echarts.init(document.getElementById('droughtDistChart'));
        const option = {
            title: {
                text: '干旱指数分布',
                left: 'center',
                top: 10
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '干旱程度',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '60%'],
                    data: [
                        { value: 60, name: '正常', itemStyle: { color: '#2ecc71' } },
                        { value: 25, name: '轻度干旱', itemStyle: { color: '#f1c40f' } },
                        { value: 10, name: '中度干旱', itemStyle: { color: '#e67e22' } },
                        { value: 5, name: '重度干旱', itemStyle: { color: '#e74c3c' } }
                    ],
                    label: {
                        formatter: '{b}: {d}%'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
        this.charts.drought = chart;
    }

    // 更新成熟度进度
    updateMaturityProgress() {
        const circle = document.querySelector('.progress-ring-circle');
        const progress = 75; // 当前进度
        const radius = 45;
        const circumference = 2 * Math.PI * radius;
        const offset = circumference - (progress / 100) * circumference;
        
        circle.style.strokeDasharray = `${circumference} ${circumference}`;
        circle.style.strokeDashoffset = offset;

        // 更新右侧详情面板
        const detailContent = document.getElementById('plotDetails');
        detailContent.innerHTML = `
            <div class="detail-item">
                <h4>当前生长阶段</h4>
                <div class="stage-info">
                    <span class="stage-name">灌浆期</span>
                    <span class="stage-progress">${progress}%</span>
                </div>
                <div class="stage-dates">
                    <span>开始时间：2024-03-01</span>
                    <span>预计完成：2024-03-25</span>
                </div>
            </div>
            <div class="detail-item">
                <h4>关键指标</h4>
                <div class="indicators">
                    <div class="indicator">
                        <span class="label">株高</span>
                        <span class="value">95cm</span>
                    </div>
                    <div class="indicator">
                        <span class="label">穗长</span>
                        <span class="value">18cm</span>
                    </div>
                    <div class="indicator">
                        <span class="label">叶片数</span>
                        <span class="value">12片</span>
                    </div>
                </div>
            </div>
        `;
    }

    initializeDateRange() {
        // 设置默认时间范围
        const startDate = document.getElementById('startDate');
        const endDate = document.getElementById('endDate');
        
        // 设置默认开始日期为当前日期前30天
        const defaultStart = new Date();
        defaultStart.setDate(defaultStart.getDate() - 30);
        startDate.value = this.formatDate(defaultStart);
        
        // 设置默认结束日期为当前日期
        const defaultEnd = new Date();
        endDate.value = this.formatDate(defaultEnd);
    }

    formatDate(date) {
        return date.toISOString().split('T')[0];
    }

    loadInitialData() {
        // 模拟加载初始数据
        this.updateAnalysisContent('growth');
        this.updateThematicLayer('growth');
        this.updateDetailPanel();
    }

    // 更新专题图层
    updateThematicLayer(type) {
        // 清除现有专题图层
        Object.values(this.thematicLayers).forEach(layer => {
            if (this.map.hasLayer(layer)) {
                this.map.removeLayer(layer);
            }
        });

        // 根据类型添加对应的专题图层
        switch(type) {
            case 'growth':
                this.addNDVILayer();
                break;
            case 'yield':
                this.addYieldPredictionLayer();
                break;
            case 'drought':
                this.addDroughtLayer();
                break;
            case 'maturity':
                this.addMaturityLayer();
                break;
        }
    }

    // 添加NDVI专题图层
    addNDVILayer() {
        const ndviData = this.generateNDVIData();
        this.thematicLayers.ndvi = L.heatLayer(ndviData, {
            radius: 25,
            blur: 15,
            gradient: {
                0.4: '#ff0000',  // 生长不良
                0.6: '#ffff00',  // 一般
                0.8: '#00ff00'   // 良好
            },
            maxZoom: 18
        }).addTo(this.map);
    }

    // 添加产量预测图层
    addYieldPredictionLayer() {
        const yieldData = this.generateYieldData();
        this.thematicLayers.yield = L.choropleth(yieldData, {
            valueProperty: 'predicted_yield',
            scale: ['#ffffcc', '#006837'],
            steps: 5,
            mode: 'q',
            style: {
                weight: 2,
                opacity: 1,
                color: 'white',
                fillOpacity: 0.7
            },
            onEachFeature: (feature, layer) => {
                layer.bindPopup(`
                    <h4>地块：${feature.properties.name}</h4>
                    <p>预测产量：${feature.properties.predicted_yield} 吨/亩</p>
                    <p>较去年：${feature.properties.change > 0 ? '+' : ''}${feature.properties.change}%</p>
                `);
            }
        }).addTo(this.map);
    }

    // 添加干旱监测图层
    addDroughtLayer() {
        const droughtData = this.generateDroughtData();
        this.thematicLayers.drought = L.heatLayer(droughtData, {
            radius: 25,
            blur: 15,
            gradient: {
                0.2: '#2ecc71',  // 正常
                0.4: '#f1c40f',  // 轻度干旱
                0.6: '#e67e22',  // 中度干旱
                0.8: '#e74c3c'   // 重度干旱
            },
            maxZoom: 18
        }).addTo(this.map);
    }

    // 添加成熟度分析图层
    addMaturityLayer() {
        const maturityData = this.generateMaturityData();
        this.thematicLayers.maturity = L.geoJSON(maturityData, {
            style: (feature) => ({
                fillColor: this.getMaturityColor(feature.properties.maturity),
                weight: 2,
                opacity: 1,
                color: 'white',
                fillOpacity: 0.7
            }),
            onEachFeature: (feature, layer) => {
                layer.bindPopup(`
                    <h4>地块：${feature.properties.name}</h4>
                    <p>当前阶段：${feature.properties.stage}</p>
                    <p>成熟度：${feature.properties.maturity}%</p>
                    <p>预计收获：${feature.properties.harvestDate}</p>
                `);
            }
        }).addTo(this.map);
    }

    // 生成模拟数据的辅助方法
    generateNDVIData() {
        // 生成NDVI模拟数据点
        const basePoint = [44.2335295, 87.3130815];
        const points = [];
        for (let i = 0; i < 100; i++) {
            points.push([
                basePoint[0] + (Math.random() - 0.5) * 0.02,
                basePoint[1] + (Math.random() - 0.5) * 0.02,
                0.4 + Math.random() * 0.4
            ]);
        }
        return points;
    }

    generateYieldData() {
        // 生成产量预测模拟数据
        return {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        "name": "A区",
                        "predicted_yield": 5.8,
                        "change": 8.5
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[
                            [87.3120815, 44.2335295],
                            [87.3140815, 44.2335295],
                            [87.3140815, 44.2355295],
                            [87.3120815, 44.2355295],
                            [87.3120815, 44.2335295]
                        ]]
                    }
                }
                // ... 可以添加更多地块
            ]
        };
    }

    // 更新右侧详情面板
    updateDetailPanel() {
        const detailContent = document.getElementById('plotDetails');
        if (!this.selectedArea) {
            detailContent.innerHTML = `
                <div class="no-selection">
                    <i class="fas fa-map-marker-alt"></i>
                    <p>请在地图上选择地块查看详情</p>
                </div>
            `;
            return;
        }

        // 根据不同分析类型显示对应的详情
        switch(this.currentAnalysisType) {
            case 'growth':
                this.updateGrowthDetails();
                break;
            case 'yield':
                this.updateYieldDetails();
                break;
            case 'drought':
                this.updateDroughtDetails();
                break;
            case 'maturity':
                this.updateMaturityDetails();
                break;
        }
    }

    // 更新右侧详情面板的方法
    updateGrowthDetails() {
        const detailContent = document.getElementById('plotDetails');
        detailContent.innerHTML = `
            <div class="detail-section">
                <h4>生长指标</h4>
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="label">NDVI指数</span>
                        <span class="value">0.78</span>
                        <span class="trend positive">+0.05</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">植被覆盖度</span>
                        <span class="value">92%</span>
                        <span class="trend positive">+3%</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">叶面积指数</span>
                        <span class="value">4.2</span>
                        <span class="trend positive">+0.3</span>
                    </div>
                </div>
            </div>
            <div class="detail-section">
                <h4>生长状况评估</h4>
                <div class="status-card">
                    <div class="status-icon good">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="status-info">
                        <span class="status-text">生长状况良好</span>
                        <span class="status-desc">高于历史同期水平</span>
                    </div>
                </div>
            </div>
            <div class="detail-section">
                <h4>历史对比</h4>
                <div class="history-chart" id="growthHistoryChart" style="height: 200px;"></div>
            </div>
        `;
        
        // 初始化历史对比图表
        this.initGrowthHistoryChart();
    }

    updateYieldDetails() {
        const detailContent = document.getElementById('plotDetails');
        detailContent.innerHTML = `
            <div class="detail-section">
                <h4>产量预测</h4>
                <div class="yield-prediction">
                    <div class="prediction-value">5.8</div>
                    <div class="prediction-unit">吨/亩</div>
                    <div class="prediction-compare">
                        较去年同期 <span class="positive">+8.5%</span>
                    </div>
                </div>
            </div>
            <div class="detail-section">
                <h4>影响因素分析</h4>
                <div class="factor-list">
                    <div class="factor-item">
                        <div class="factor-header">
                            <i class="fas fa-sun"></i>
                            <span>光照条件</span>
                            <span class="factor-score">85分</span>
                        </div>
                        <div class="factor-progress">
                            <div class="progress-bar" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="factor-item">
                        <div class="factor-header">
                            <i class="fas fa-tint"></i>
                            <span>水分条件</span>
                            <span class="factor-score">75分</span>
                        </div>
                        <div class="factor-progress">
                            <div class="progress-bar" style="width: 75%"></div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    updateDroughtDetails() {
        const detailContent = document.getElementById('plotDetails');
        detailContent.innerHTML = `
            <div class="detail-section">
                <h4>干旱监测指标</h4>
                <div class="drought-indicators">
                    <div class="indicator-item">
                        <span class="label">土壤水分</span>
                        <span class="value">28%</span>
                        <span class="status normal">正常范围</span>
                    </div>
                    <div class="indicator-item">
                        <span class="label">蒸散强度</span>
                        <span class="value">3.2</span>
                        <span class="status warning">偏高</span>
                    </div>
                </div>
            </div>
            <div class="detail-section">
                <h4>未来7天预测</h4>
                <div class="forecast-list">
                    ${this.generateDroughtForecast()}
                </div>
            </div>
        `;
    }

    updateMaturityDetails() {
        const detailContent = document.getElementById('plotDetails');
        detailContent.innerHTML = `
            <div class="detail-section">
                <h4>生长阶段</h4>
                <div class="stage-info">
                    <div class="current-stage">
                        <span class="stage-name">灌浆期</span>
                        <span class="stage-progress">75%</span>
                    </div>
                    <div class="stage-dates">
                        <div class="date-item">
                            <span class="label">开始时间</span>
                            <span class="value">2024-03-01</span>
                        </div>
                        <div class="date-item">
                            <span class="label">预计完成</span>
                            <span class="value">2024-03-25</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-section">
                <h4>关键指标</h4>
                <div class="maturity-indicators">
                    <div class="indicator-item">
                        <i class="fas fa-ruler-vertical"></i>
                        <div class="indicator-info">
                            <span class="label">株高</span>
                            <span class="value">95cm</span>
                        </div>
                    </div>
                    <div class="indicator-item">
                        <i class="fas fa-leaf"></i>
                        <div class="indicator-info">
                            <span class="label">穗长</span>
                            <span class="value">18cm</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    // 生成干旱预测的HTML
    generateDroughtForecast() {
        const days = ['今天', '明天', '后天', '第4天', '第5天', '第6天', '第7天'];
        return days.map(day => `
            <div class="forecast-item">
                <span class="day">${day}</span>
                <span class="value">${(Math.random() * 0.4 + 0.2).toFixed(2)}</span>
                <span class="trend ${Math.random() > 0.5 ? 'up' : 'down'}">
                    <i class="fas fa-arrow-${Math.random() > 0.5 ? 'up' : 'down'}"></i>
                </span>
            </div>
        `).join('');
    }

    // 初始化历史记录列表
    initializeHistoryList() {
        const historyList = document.getElementById('historyList');
        const historyData = this.getHistoryData();
        
        historyList.innerHTML = historyData.map(record => `
            <div class="history-item" data-type="${record.type}">
                <div class="history-preview">
                    <img src="${record.thumbnail}" alt="分析记录预览">
                    <div class="preview-type ${record.type}">
                        <i class="fas ${this.getTypeIcon(record.type)}"></i>
                        ${this.getTypeName(record.type)}
                    </div>
                    <div class="preview-overlay">
                        <button class="btn-view" title="查看详情">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn-compare" title="对比分析">
                            <i class="fas fa-chart-line"></i>
                        </button>
                        <button class="btn-export" title="导出报告">
                            <i class="fas fa-file-export"></i>
                        </button>
                    </div>
                </div>
                <div class="history-info">
                    <div class="history-header">
                        <span class="analysis-time">
                            <i class="far fa-clock"></i>
                            ${record.time}
                        </span>
                        <span class="area-name">
                            <i class="fas fa-map-marker-alt"></i>
                            ${record.area}
                        </span>
                    </div>
                    <div class="history-summary">
                        <div class="key-value">
                            <span class="key">${this.getKeyMetric(record.type)}:</span>
                            <span class="value ${record.trend}">${record.value}</span>
                        </div>
                        <div class="trend-indicator ${record.trend}">
                            <i class="fas fa-arrow-${record.trend === 'up' ? 'up' : 'down'}"></i>
                            ${record.trendValue}
                        </div>
                    </div>
                    <div class="history-details">
                        ${this.generateDetailsHtml(record.details, record.type)}
                    </div>
                </div>
            </div>
        `).join('');

        // 添加历史记录项的点击事件
        this.setupHistoryItemEvents();
    }

    // 获取模拟历史数据
    getHistoryData() {
        return [
            {
                type: 'growth',
                thumbnail: 'images/analysis/growth-preview1.jpg',
                time: '2024-03-15 14:30',
                area: 'A区水稻田',
                value: 'NDVI 0.78',
                trend: 'up',
                trendValue: '+8.3%',
                details: {
                    coverage: '92%',
                    health: '良好',
                    suggestion: '建议保持现有管理方式'
                }
            },
            {
                type: 'drought',
                thumbnail: 'images/analysis/drought-preview2.jpg',
                time: '2024-03-14 10:15',
                area: 'B区玉米地',
                value: '干旱指数 0.35',
                trend: 'down',
                trendValue: '-5.2%',
                details: {
                    soilMoisture: '28%',
                    warning: '轻度缺水',
                    suggestion: '建议适当增加灌溉量'
                }
            },
            {
                type: 'yield',
                thumbnail: 'images/analysis/yield-preview3.jpg',
                time: '2024-03-13 16:45',
                area: 'C区小麦地',
                value: '预估 5.8吨/亩',
                trend: 'up',
                trendValue: '+5.5%',
                details: {
                    lastYear: '5.5吨/亩',
                    increase: '0.3吨/亩',
                    factors: '光照充足，水分适中'
                }
            },
            {
                type: 'maturity',
                thumbnail: 'images/analysis/maturity-preview4.jpg',
                time: '2024-03-12 09:20',
                area: 'A区水稻田',
                value: '成熟度 75%',
                trend: 'up',
                trendValue: '+15%',
                details: {
                    stage: '灌浆期',
                    estimatedHarvest: '预计25天后收获',
                    suggestion: '注意防止倒伏'
                }
            },
            {
                type: 'growth',
                thumbnail: 'images/analysis/growth-preview5.jpg',
                time: '2024-03-11 15:40',
                area: 'D区油菜地',
                value: 'NDVI 0.72',
                trend: 'up',
                trendValue: '+6.8%',
                details: {
                    coverage: '88%',
                    health: '良好',
                    suggestion: '可适当增加肥料'
                }
            },
            {
                type: 'drought',
                thumbnail: 'images/analysis/drought-preview6.jpg',
                time: '2024-03-10 11:20',
                area: 'B区玉米地',
                value: '干旱指数 0.42',
                trend: 'down',
                trendValue: '-3.8%',
                details: {
                    soilMoisture: '32%',
                    warning: '土壤水分偏低',
                    suggestion: '建议增加灌溉频次'
                }
            },
            {
                type: 'yield',
                thumbnail: 'images/analysis/yield-preview7.jpg',
                time: '2024-03-09 16:15',
                area: 'A区水稻田',
                value: '预估 6.2吨/亩',
                trend: 'up',
                trendValue: '+7.2%',
                details: {
                    lastYear: '5.8吨/亩',
                    increase: '0.4吨/亩',
                    factors: '生长势头良好，病虫害发生率低'
                }
            },
            {
                type: 'maturity',
                thumbnail: 'images/analysis/maturity-preview8.jpg',
                time: '2024-03-08 09:45',
                area: 'C区小麦地',
                value: '成熟度 82%',
                trend: 'up',
                trendValue: '+12%',
                details: {
                    stage: '成熟期',
                    estimatedHarvest: '预计15天后收获',
                    suggestion: '准备收割机械'
                }
            },
            {
                type: 'growth',
                thumbnail: 'images/analysis/growth-preview9.jpg',
                time: '2024-03-07 14:50',
                area: 'D区油菜地',
                value: 'NDVI 0.68',
                trend: 'down',
                trendValue: '-2.1%',
                details: {
                    coverage: '85%',
                    health: '一般',
                    suggestion: '建议补充叶面肥'
                }
            },
            {
                type: 'drought',
                thumbnail: 'images/analysis/drought-preview10.jpg',
                time: '2024-03-06 10:30',
                area: 'A区水稻田',
                value: '干旱指数 0.28',
                trend: 'up',
                trendValue: '+4.2%',
                details: {
                    soilMoisture: '35%',
                    warning: '水分充足',
                    suggestion: '保持现有灌溉方案'
                }
            }
        ];
    }

    // 获取分析类型图标
    getTypeIcon(type) {
        const icons = {
            growth: 'fa-seedling',
            yield: 'fa-chart-line',
            drought: 'fa-tint-slash',
            maturity: 'fa-clock'
        };
        return icons[type] || 'fa-chart-bar';
    }

    // 获取分析类型名称
    getTypeName(type) {
        const names = {
            growth: '长势分析',
            yield: '产量预估',
            drought: '干旱指数',
            maturity: '成熟度分析'
        };
        return names[type] || '未知类型';
    }

    // 获取关键指标名称
    getKeyMetric(type) {
        const metrics = {
            growth: 'NDVI指数',
            yield: '预估产量',
            drought: '干旱指数',
            maturity: '成熟度'
        };
        return metrics[type] || '指标值';
    }

    // 生成详情HTML
    generateDetailsHtml(details, type) {
        switch(type) {
            case 'growth':
                return `
                    <div class="details-grid">
                        <div class="detail-tag">覆盖度: ${details.coverage}</div>
                        <div class="detail-tag">状况: ${details.health}</div>
                        <div class="detail-suggestion">${details.suggestion}</div>
                    </div>
                `;
            case 'drought':
                return `
                    <div class="details-grid">
                        <div class="detail-tag">土壤水分: ${details.soilMoisture}</div>
                        <div class="detail-tag warning">${details.warning}</div>
                        <div class="detail-suggestion">${details.suggestion}</div>
                    </div>
                `;
            // ... 其他类型的详情显示
        }
    }

    // 设置历史记录项的事件监听
    setupHistoryItemEvents() {
        document.querySelectorAll('.history-item').forEach(item => {
            // 查看详情按钮
            item.querySelector('.btn-view').addEventListener('click', (e) => {
                e.stopPropagation();
                this.viewHistoryDetail(item.dataset.type);
            });

            // 对比分析按钮
            item.querySelector('.btn-compare').addEventListener('click', (e) => {
                e.stopPropagation();
                this.compareAnalysis(item.dataset.type);
            });

            // 导出报告按钮
            item.querySelector('.btn-export').addEventListener('click', (e) => {
                e.stopPropagation();
                this.exportAnalysisReport(item.dataset.type);
            });
        });
    }

    // 初始化右侧详情面板
    initializeDetailPanel() {
        const detailContent = document.getElementById('plotDetails');
        detailContent.innerHTML = `
            <div class="plot-basic-info">
                <div class="plot-header">
                    <h4>${this.selectedPlot.name}</h4>
                    <span class="plot-id">ID: ${this.selectedPlot.id}</span>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <i class="fas fa-map"></i>
                        <div class="info-content">
                            <label>种植面积</label>
                            <span>${this.selectedPlot.area}</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-seedling"></i>
                        <div class="info-content">
                            <label>作物类型</label>
                            <span>水稻</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-calendar-alt"></i>
                        <div class="info-content">
                            <label>种植日期</label>
                            <span>${this.selectedPlot.plantingDate}</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div class="info-content">
                            <label>所在地区</label>
                            <span>${this.selectedPlot.location}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plot-detail-section">
                <h4>土地信息</h4>
                <div class="detail-list">
                    <div class="detail-item">
                        <label>土壤类型</label>
                        <span>${this.selectedPlot.basicInfo.soilType}</span>
                    </div>
                    <div class="detail-item">
                        <label>灌溉方式</label>
                        <span>${this.selectedPlot.basicInfo.irrigation}</span>
                    </div>
                    <div class="detail-item">
                        <label>种植品种</label>
                        <span>${this.selectedPlot.basicInfo.variety}</span>
                    </div>
                    <div class="detail-item">
                        <label>上季作物</label>
                        <span>${this.selectedPlot.basicInfo.previousCrop}</span>
                    </div>
                </div>
            </div>
            <div class="plot-status-section">
                <h4>当前状态</h4>
                <div class="status-cards">
                    <div class="status-card">
                        <div class="status-icon">
                            <i class="fas fa-thermometer-half"></i>
                        </div>
                        <div class="status-info">
                            <label>平均温度</label>
                            <span>24.5°C</span>
                        </div>
                    </div>
                    <div class="status-card">
                        <div class="status-icon">
                            <i class="fas fa-tint"></i>
                        </div>
                        <div class="status-info">
                            <label>土壤湿度</label>
                            <span>32%</span>
                        </div>
                    </div>
                    <div class="status-card">
                        <div class="status-icon">
                            <i class="fas fa-sun"></i>
                        </div>
                        <div class="status-info">
                            <label>光照强度</label>
                            <span>85%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plot-action-section">
                <button class="action-btn primary">
                    <i class="fas fa-chart-line"></i>
                    查看趋势
                </button>
                <button class="action-btn">
                    <i class="fas fa-history"></i>
                    历史记录
                </button>
            </div>
        `;

        // 添加按钮事件监听
        this.setupDetailPanelEvents();
    }

    // 设置详情面板的事件监听
    setupDetailPanelEvents() {
        const actionButtons = document.querySelectorAll('.action-btn');
        actionButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                if (e.currentTarget.classList.contains('primary')) {
                    this.showTrendAnalysis();
                } else {
                    this.showHistoryRecords();
                }
            });
        });
    }

    // 显示趋势分析
    showTrendAnalysis() {
        // 实现趋势分析显示逻辑
        console.log('显示趋势分析');
    }

    // 显示历史记录
    showHistoryRecords() {
        // 实现历史记录显示逻辑
        console.log('显示历史记录');
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    new RemoteSensingAnalysis();
}); 
 